﻿
@model List<Carpool1.Models.CarpoolInfo>
@using System.Linq
@{
    ViewBag.Title = "拼车网 - 首页";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1 class="text-center my-5">寻找合适的拼车</h1>

<!-- 搜索筛选区 -->
<div class="bg-light p-4 rounded mb-5">
    <h3 class="mb-4">拼车筛选</h3>
    <form id="searchForm" class="row g-3">
        <div class="col-md-3">
            <label for="type" class="form-label">拼车类型</label>
            @Html.DropDownList("type", (SelectList)ViewBag.Types, new { @class = "form-select", id = "searchType" })
        </div>
        <div class="col-md-3">
            <label for="startCity" class="form-label">出发城市</label>
            <input type="text" id="startCity" name="startCity" value="@ViewBag.StartCity"
                   class="form-control" placeholder="输入出发城市" />
        </div>
        <div class="col-md-3">
            <label for="endCity" class="form-label">目的城市</label>
            <input type="text" id="endCity" name="endCity" value="@ViewBag.EndCity"
                   class="form-control" placeholder="输入目的城市" />
        </div>
        <div class="col-md-3 d-flex align-items-end">
            <button type="button" id="searchBtn" class="btn btn-primary w-100">
                <i class="fa fa-search me-2"></i>搜索拼车
            </button>
        </div>
    </form>
</div>


<!-- 拼车列表区 -->
<div id="carpoolList">
    @if (Model.Any())
    {
        foreach (var carpool in Model)
        {
            <div class="card mb-4 shadow">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h4 class="text-primary mb-2">
                                <i class="fa fa-car mr-2"></i>
                                @carpool.StartCity <span class="text-muted">→</span> @carpool.EndCity
                            </h4>
                            <p class="text-muted mb-1">
                                <i class="fa fa-clock-o mr-1"></i>
                                出发时间: @carpool.DepartureTime.ToString("yyyy-MM-dd HH:mm")
                            </p>
                            <p class="text-muted mb-1">
                                <i class="fa fa-users mr-1"></i>
                                @carpool.ParticipantCount/@carpool.Capacity 人
                            </p>
                        </div>
                        <div class="text-right">
                            <span class="badge bg-@(carpool.InfoType == 1 ? "warning" : "success")">
                                @(carpool.InfoType == 1 ? "长途" : "短途")
                            </span>
                            <p class="mt-2 font-weight-bold text-primary">
                                @(carpool.FeeType == 1 ? "费用面议" : $"{carpool.Fee} 元/人")
                            </p>
                        </div>
                    </div>

                    <div class="mt-3 border-top pt-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="text-muted mr-3">
                                    <i class="fa fa-user mr-1"></i>
                                    @{
                                        var user = carpool.User;
                                        string displayText = "匿名用户";

                                        if (user != null)
                                        {
                                            string name = !string.IsNullOrEmpty(user.RealName) ? user.RealName : "未实名";
                                            string phone = !string.IsNullOrEmpty(user.PhoneNumber) && user.PhoneNumber.Length >= 11
                                                ? user.PhoneNumber.Substring(0, 3) + "****" + user.PhoneNumber.Substring(7)
                                                : "无手机号";

                                            displayText = $"{name} ({phone})";
                                        }


                                 
                                                                    @displayText;
                                    }
                                </span>
                                <span class="text-muted">
                                    <i class="fa fa-calendar mr-1"></i>
                                    发布于 @carpool.PublishTime.Value.ToString("yyyy-MM-dd")
                                </span>
                            </div>
                            <div>
                                <a href="@Url.Action("Detail", "Home", new { id = carpool.InfoID })" class="btn btn-sm btn-primary">
                                    <i class="fa fa-info-circle mr-1"></i>查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    }
    else
    {
        <div class="alert alert-info text-center py-5">
            <i class="fa fa-search-minus text-4xl mb-3 text-muted"></i>
            <h4>@ViewBag.NoResultMessage</h4>
            <p class="mt-2">请尝试调整筛选条件或稍后再试</p>
        </div>
    }
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            // 搜索按钮点击事件
            $("#searchBtn").on("click", function() {
                var type = $("#searchType").val();
                var startCity = $("#startCity").val();
                var endCity = $("#endCity").val();

                // 显示加载状态
                $("#carpoolList").html('<div class="text-center py-5"><i class="fa fa-spinner fa-spin fa-3x text-muted"></i></div>');

                // 异步加载拼车列表
                $.ajax({
                    url: "@Url.Action("_CarpoolList", "Home")",
                    type: "GET",
                    data: {
                        type: type,
                        startCity: startCity,
                        endCity: endCity
                    },
                    success: function(result) {
                        $("#carpoolList").html(result);
                    },
                    error: function(xhr, status, error) {
                        console.error("搜索请求错误: " + error);
                        $("#carpoolList").html(`
                            <div class="alert alert-danger text-center py-5">
                                <i class="fa fa-exclamation-circle text-4xl mb-3 text-muted"></i>
                                <h4>搜索失败，请稍后再试</h4>
                            </div>
                        `);
                    }
                });
            });

            // 支持按回车键搜索
            $("input").keypress(function(e) {
                if (e.which === 13) {
                    $("#searchBtn").click();
                }
            });
        });
    </script>
}